<template>
<div class="box">
  <table cellspacing="0" cellpadding="0" border="1" id="table">
    <tr>
      <th>語文</th>
      <th>数学</th>
      <th>英语</th>
      <th>历史</th>
      <th>地理</th>
      <th>化学</th>
      <th>生物</th>
      <th>物理</th>
      <th>政治</th>
      <th>疯子</th>
    </tr>
    <tr>
      <td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

const  resizeTableCol = (id: string) =>{
       var i,
           self,
           table = document.querySelector(id),
           header = table.rows[0],
           tableX = header.clientWidth,
           length = header.cells.length;
       for (i = 0; i < length; i++) {
        header.cells[i].onmousedown = function () {
           self = this;
          if (event.offsetX > self.offsetWidth - 10) {
            self.mouseDown = true;
            self.oldX = event.x;
            self.oldWidth = self.offsetWidth;
          }
        };
        header.cells[i].onmousemove = function () {
          if (event.offsetX > this.offsetWidth - 10) {
            this.style.cursor = 'col-resize';
          } else {
            this.style.cursor = 'default';
          }
          if (self == undefined) {
            self = this;
          }
          if (self.mouseDown != null && self.mouseDown == true) {
            if (self == undefined) {
            self = this;
          }
            self.style.cursor = 'default';
            if (self.oldWidth + (event.x - self.oldX) > 0) {
              self.width = self.oldWidth + (event.x - self.oldX);
            }
            self.style.width = self.width;
            table.style.width = tableX + (event.x - self.oldX) + 'px';
            self.style.cursor = 'col-resize';
          }
        };
        table.onmouseup = function () {
          if (self == undefined) {
            self = this;
          }
          self.mouseDown = false;
          self.style.cursor = 'default';
          tableX = header.clientWidth;
        };
       }
   }
   
//使用时传入table的id名
setTimeout(() => {
    resizeTableCol('#table')
}, 300);
</script>

<style scoped>
  .box {
      width: 100%;
      height: 100%;
  }
  
  table {
      width: 100%;
      height: 300px;
  }

  tr:nth-of-type(odd) {
      background-color: #fff;
  }
  
  tr:nth-of-type(even) {
      background-color: #EDF6FA;
  }
  
  th {
      height: 40px;
      background-color: #fff;
      text-align: center;
      padding: 0;
      line-height: 40px;
      color: #708BB3;
      font-size: 14px;
      border-right: 2px solid #E6EDEB;
      vertical-align: middle;
  }
  
  th:last-child {
      width: 159px;
      border-right: none;
  }

  td {
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #5C7191;
      font-size: 12px;
      border-right: 2px solid #E6EDEB;
      padding: 0;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis; 
      white-space: nowrap;
  }
  
  td:nth-child(1) {
      width: 87px !important;
  }
  
  td:last-child {
      width: 159px !important;
      cursor: pointer;
      border-right: none;
  }
  
  .tableDetail:hover {
      text-decoration: none;
  }

  .tableDetail:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 13px;
      height: 15px;
      margin-right: 4px;
      background-size: 100%;
  }

  .tableDetail {
      display: block;
      margin: auto;
      width: 60px;
      height: 26px;
      background: rgba(72, 158, 255, 1);
      border: 1px solid rgba(69, 151, 245, 1);
      box-shadow: 0px 1px 2px 0px rgba(120, 135, 142, 0.2); 
      border-radius: 2px;
      color: #fff !important;
      font-size: 12px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
  }
</style>
